<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>H5CASE—最优质的H5案例展示供应平台</title>
		<link rel="stylesheet" href="<%=path %>/inner/css/public.css" />
		<link rel="stylesheet" href="<%=path %>/inner/css/font-awesome.css" />
	</head>
	<body>
	<div class="hd" style="display:none">
            <div class="hd-bd">
                <div class="logo">
                    <a href="<%=path %>/front/index.html"><img src="<%=path %>/front/img/logo.png" alt="" /></a>
                </div>
                <div class="search">
                    <input type="text" id="planName" name="planName"/>
                    <span class="fa fa-search" onclick="search();" aria-hidden="true"></span>
                </div>
                <div class="xm">
                    <span>我要定制</span>
                    <span>案例推荐</span>
                </div>
            </div>          
        </div>
		<div class="content-bd">
			<div class="jz">
				<div class="sift">
					<div class="second-title">					
						<div id="selectList" class="screenBox screenBackground">						
							<dl class="listIndex" attr="terminal_brand_s">
								<dt>行业</dt>
								<dd id="industies">
									<a href="javascript:typeDemo()" class="a-choose">全部</a>
									<c:forEach items="${industies }" var="item">
										<a href="javascript:typeDemo()" code="${item.dicCode }">${item.dicName }</a>
									</c:forEach>
								</dd>
							</dl>							
							<dl class="listIndex" attr="terminal_os_s">
								<dt>节日</dt>
								<dd id="holidays">
									<a href="javascript:typeDemo()" class="a-choose">全部</a>
									<c:forEach items="${holidays }" var="item">
										<a href="javascript:typeDemo()" code="${item.dicCode }">${item.dicName }</a>
									</c:forEach>
								</dd>
							</dl>							
							<dl class=" listIndex" attr="terminal_os_s">
								<dt>功能</dt>
								<dd id="functions">
									<a href="javascript:typeDemo()" class="a-choose">全部</a>
									<c:forEach items="${functions }" var="item">
										<a href="javascript:typeDemo()" code="${item.dicCode }">${item.dicName }</a>
									</c:forEach>
								</dd>
							</dl>										
						</div>				
				    </div>
				</div>
				<div class="zs-fl">
					<span id="cs" class="cs" code="hot">人气</span>
					<span id="cs" code="new">最新</span>
					<span id="cs" code="xuanzhen">宣臻</span>
				</div>
				<div class="zs-bd" id="cases">
				 <%-- <div class="zs-list">
						<p>多得多地点多多多多</p>
						<span class="float-right">10000</span>
						<span class="fa fa-heart-o float-right sc"></span>
						<div class="pic">
							<img src="<%=path %>/inner/img/pic.jpg" alt="" />
						</div>
						<span class="s-title">打发打发</span>
						<span class="fa fa-tag sc float-left"></span>
						<span class="float-left zs-ll">公益</span>
						<span class="fa fa-eye sc float-left"></span>
						<span class="float-left">10000</span>
					</div> --%>
				</div>
				<div class="zs-more">
					<span>
					更&nbsp;&nbsp;多&nbsp;&nbsp;案&nbsp;&nbsp;例&nbsp;&nbsp;+
					</span>
					<input type="hidden" name="pgNo" id="pgNo" value="1"/>
				</div>
			</div>			
		</div>
		<div class="tc">
			<div class="tc-bd">
				<div class="ks">
					<div class="tc-close">
						<img src="<%=path %>/inner/img/close.jpg" alt="" />
					</div>
					<div class="tc-iphone">
						<div class="kuang">
							<iframe src="" frameborder="0" width="370" height="620" scrolling="yes"></iframe>
						</div>				
					</div>
					<div class="zs-list tc-list" style="display:none">
					   <div class="zs-title">
					       <p id="name">多得多地点多多多多</p>
					    </div>
					    <span class="fa fa-eye sc float-left"></span>
						<span class="float-left tc-ll" id="watch">10000</span>
						<span class="fa fa-heart float-left sc"></span>
						<span class="float-left" id="hot">10000</span>
						<span class="tc-st" id="description">打发打发</span>
						<span class="tc-cp" id="company">出品：宣臻</span>
						<!-- <span class="tc-cp" id="company">出品：宣臻</span> -->
						<span class="fa fa-tag sc float-left"></span>
						<span class="float-left zs-width" id="tag">公益</span>
						<input type="hidden" id="id"/>
						<span class="tc-ewm">
							<img id = "imgSrc" src="" alt="" />
							<p class="tc-sys">扫一扫手机预览</p>
						</span>
						<div class="want" style="display:none">
						     <a href="#" class="tc-yyz">我&nbsp;&nbsp;也&nbsp;&nbsp;要&nbsp;&nbsp;做</a>
						</div>
					</div>
					<div class="zs-lb" style="display:none">
						<div class="btn-left">
							<img src="<%=path %>/inner/img/left.jpg" alt="" />
						</div>
						<div class="only-out">
							<ul class="only only-scroll" id="pics">
								<%-- <a href="#">
									<li>
										<img src="<%=path %>/inner/img/film.jpg" alt="" />
									</li>
								</a> --%>
							</ul>
						</div>
						<div class="btn-right">
							<img src="<%=path %>/inner/img/right.jpg" alt="" />
						</div>
					</div>						
				</div>				
			</div>
		</div>
		<div class="tcx tcx-o">
			<div class="tcw">
				<form action="<%=path %>/order/addOrder.html" id="orderForm" method="post">
				<div class="tcw-t">请留下您的联系方式及制作需要，我们的客服人员将尽快与您联系！</div>
				<div class="tcw-c">
					<div class="tcw-c-left">
						<div class='biao'>
							<span class="biao-t">姓名</span>
							<input type="text" name="orderName" id="oName" maxlength=10  placeholder="请输入您的称呼"/>
						</div>
						<div class='biao'>
							<span class="biao-t">联系方式</span>
							<input type="text" name="orderPhone" id="oPhone" maxlength=30 placeholder="请输入电话或邮箱,我们会尽快联系您"/>
						</div>
						<div class='biao'>
							<span class="biao-t" style="vertical-align: top;">需求描述</span>
							<textarea  id="oDescription" name="orderDescription" cols="20" rows="5" 
						onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" 
						onkeypress="LimitTextArea(this)" title="您的最大输入长度为100字"></textarea>
						</div>
						<input type="hidden" id="oPlanId" name="orderPlanId">
						<input type="hidden" id="oPlanTiTle" name="orderPlanTitle" >
					</div>
					<div class="tcw-c-right">
						<div class="tx">
							联系我们
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/phone.png" alt="" /></span>
							<span>13321889270(沈经理)</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/qq.png" alt="" /></span>
							<span>15442397</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/email.png" alt="" /></span>
							<span>eric.shen@xuanzhen-tech.com</span>
						</div>
					</div>
				</div>
				<span class="tcw-bt1 tcw-submit">提&nbsp;&nbsp;&nbsp;交</span>
				<span class="tcw-bt2 close1">关&nbsp;&nbsp;&nbsp闭</span>
				</form>
			</div>
		</div>
		<div class="tcx tcx-p" style="display:none">
			<div class="tcw">
				<form id="recommendForm">
				<div class="tcw-t">如果你有优质的h5案例，可推荐给我们收录。感谢您的推荐！</div>
				<div class="tcw-c">
					<div class="tcw-c-left">
						<div class='biao'>
							<span class="biao-t">姓名</span>
							<input type="text" name="recName" id="recName" maxlength=10 placeholder="请输入您的称呼"/>
						</div>
						<div class='biao'>
							<span class="biao-t">联系方式</span>
							<input type="text" name="recPhone" id="recPhone" maxlength=30 placeholder="请输入电话或邮箱,我们会尽快联系您"/>
						</div>
						<div class='biao'>
							<span class="biao-t">案例名称</span>
							<input type="text" name="recH5Title" id="recH5Title" maxlength=30 placeholder="请输入案例标题"/>
						</div>
						<div class='biao'>
							<span class="biao-t">案例地址</span>
							<input type="text" name="recH5Url" id="recH5Url" maxlength=200 placeholder="请输入案例链接"/>
						</div>
					</div>
					<div class="tcw-c-right">
						<div class="tx"> 
							联系我们
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/phone.png" alt="" /></span>
							<span>13321889270(沈经理)</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/qq.png" alt="" /></span>
							<span>15442397</span>
						</div>
						<div class="lx">
							<span><img src="<%=path %>/inner/img/email.png" alt="" /></span>
							<span>eric.shen@xuanzhen-tech.com</span>
						</div>
					</div>
				</div>
				<span class="tcw-bt1 tjal-submit">提&nbsp;&nbsp;&nbsp;交</span>
				<span class="tcw-bt2 close2">关&nbsp;&nbsp;&nbsp闭</span>
				</form>
			</div>
		</div>
		<div class="tcx" style="display:none">
			<div class="tcw">
				<form action="<%=path %>/order/addOrder.html" id="orderForm" method="post">
					<div class="tcw-bd">
						<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名</span>
						<input type="text" name="orderName" id="oName" maxlength=10  placeholder="请输入我们对您的称呼"/>
					</div>
					<div class="tcw-bd">
						<span>联系方式</span>
						<input type="text" name="orderPhone" id="oPhone" maxlength=30 placeholder="请输入电话或邮箱,我们会尽快联系您"/>
					</div>
					<div class="tcw-bd">
						<span>需求描述</span>
						<textarea id="oDescription" name="orderDescription" cols="20" rows="3" 
						onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" 
						onkeypress="LimitTextArea(this)" title="您的最大输入长度为200字"></textarea>
					</div>
					<div class='tcw-btn'>
						<span class="tcw-submit">提&nbsp;&nbsp;交</span>
						<span class="tcw-close">关&nbsp;&nbsp;闭</span>
					</div>
					<input type="hidden" id="oPlanId" name="orderPlanId">
					<input type="hidden" id="oPlanTiTle" name="orderPlanTitle" >
				</form>
			</div>
		</div>
		<div class="tjalx" style="display:none">
			<div class="tjal">
				<form id="recommendForm">
				<div class="tjal-bd">
					<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名</span>
					<input type="text" name="recName" id="recName" maxlength=10 placeholder="请输入我们对您的称呼"/>
				</div>
				<div class="tjal-bd">
					<span>联系方式</span>
					<input type="text" name="recPhone" id="recPhone" maxlength=30 placeholder="请输入电话或邮箱,我们会尽快联系您"/>
				</div>
				<div class="tjal-bd">
					<span>案例标题</span>
					<input type="text" name="recH5Title" id="recH5Title" maxlength=30 placeholder="请输入案例标题"/>
				</div>
				<div class="tjal-bd">
					<span>案例链接</span>
					<input type="text" name="recH5Url" id="recH5Url" maxlength=200 placeholder="请输入案例链接"/>
				</div>
				<div class='tjal-btn'>
					<span class="tjal-submit">提&nbsp;&nbsp;交</span>
					<span class="tjal-close">关&nbsp;&nbsp;闭</span>
				</div>
				</form>
			</div>
		</div>
	<script type="text/javascript" src="<%=path %>/inner/js/jquery-2.2.3.min.js" ></script>
	<script type="text/javascript" src="<%=path %>/front/js/jquery-form.js" ></script>
	<script type="text/javascript" src="<%=path %>/inner/js/shaixuan.js" ></script>
	<script type="text/javascript" src="<%=path %>/front/js/layer.js" ></script>
	<script>
	var basePath = "${pageContext.request.contextPath }";
	$('document').ready(function(){
		 $('.zs-fl span').click(function(){
			$(this).addClass('cs').siblings().removeClass('cs')
		})
		$('.fa-heart-o').click(function(){
			$(this).addClass('fa-heart').removeClass('fa-heart-o');
		})
	   //轮播图   根据页面大小改变
        $(window).resize(function() {
            $(".btn-right").off();
            if($(window).width() < 766 ) {
                carousel()
            }else if ($(window).width() < 1200) {
                carousel()
            }else {
                carousel()
            }
        });
        function carousel() {
            var LILENGTH = ($('.only-scroll li').width() + 14) * $('.only-scroll li').length;
            var IMGWIDTH = $('.only-out').width();
            var scrollWidth= LILENGTH - 12; 
            var leftWidth= scrollWidth - IMGWIDTH;
            $('.only-scroll').width(scrollWidth);
            $('.btn-right').hover(function(){
                var nowLeft=parseInt($('.only-scroll').css('marginLeft'));
                var lastWidth= leftWidth+nowLeft;
                var timerLeft= lastWidth * 10;
                $('.only-scroll').animate({marginLeft:-leftWidth},timerLeft,'linear');
            },function(){
                $('.only-scroll').stop();
            });
            $('.btn-left').hover(function(){
                var nowLeft=parseInt($('.only-scroll').css('marginLeft'));
                var timerRight= -nowLeft * 10;
                $('.only-scroll').animate({marginLeft:0},timerRight,'linear');
            },function(){
                $('.only-scroll').stop();
            });
        }
		$('.zs-list .pic').each(function(){
			$(this).click(function(){
				var planId = $(this).parent().find("#id").text();
				alert(planId);
				var count = $(this).parent().find("#watch").text();
				var num = Number(count);
				$(this).parent().find("#watch").text(count+1);
				$.ajax({
					type:"POST",
					url:basePath+"/inner/addWatch.html",
					data:{planId:planId},
					dataType:"json",
					success:function(){
					},
					error:function(){
					}
				});
				buildContent($(this));
				$('.tc').show();
				
		    })			
		})
		$('.tc-close').click(function(){
			$(this).parent().find(".kuang iframe").attr("src","");
			$('.tc').hide();
		})
		$('.hd-bd .xm span').eq(0).click(function(){
			$('.tcx-o').show();
		})
		$('.hd-bd .xm span').eq(1).click(function(){
			$('.tcx-p').show();
		})
		$('.close2').click(function(){
			$('.tcx-p').hide();
		})
		$('.tc-yyz').click(function(){
			$('.tcx-o').show();
			//增加两个隐藏表单域的值
			$(".tcx-o #oPlanTiTle").val($(".tc #name").text());
			$(".tcx-o #oPlanId").val($(".tc #id").val());
		})
		//提交
		$('.tcw-submit').click(function(){
			var orderName = $("#oName").val(); 
			var orderPhone = $("#oPhone").val(); 
			var orderDescription = $("#oDescription").val(); 
			if (orderName.replace(/(^s*)|(s*$)/g, "").length ==0){ 
				layer.open({
				    content: '请填入姓名'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else 
			if (orderPhone.replace(/(^s*)|(s*$)/g, "").length ==0){ 
				layer.open({
				    content: '请填入联系方式'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else
			if (orderDescription.replace(/(^s*)|(s*$)/g, "").length ==0){ 
				layer.open({
				    content: '请填入具体描述'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else{
			//alert(basePath+'/order/addOrder.html');
			//$('#orderForm').submit();
			 $('#orderForm').ajaxSubmit({
					type: 'POST',
					url: basePath+'/order/addOrder.html',
					success: function(){
						layer.open({
						    content: '提交成功'
						    ,skin: 'msg'
						    ,time: 1 //2秒后自动关闭
						  });
					},
					error:function(){
						layer.open({
						    content: '提交失败'
						    ,skin: 'msg'
						    ,time: 1 //2秒后自动关闭
						  });
					},
					//clearForm: true,
					resetForm: true
					});
				$(".tcx-o #oPlanTiTle").val('');
				$(".tcx-o #oPlanId").val("");
				$('.tcx').hide();
			}
		})
		$('.close1').click(function(){
			$(".tcx-o #oPlanTiTle").val('');
			$(".tcx-o #oPlanId").val("");
			$('.tcx-o').hide();
		})
		//提交
		$('.tjal-submit').click(function(){
			var recName = $("#recName").val(); 
			var recPhone = $("#recPhone").val(); 
			var recH5Title = $("#recH5Title").val();
			var recH5Url = $("#recH5Url").val();
			if (recName.replace(/(^s*)|(s*$)/g, "").length == 0){ 
				layer.open({
				    content: '请填入姓名！'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else 
			if (recPhone.replace(/(^s*)|(s*$)/g, "").length == 0){ 
				layer.open({
				    content: '请填入联系方式！'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else
			if (recH5Title.replace(/(^s*)|(s*$)/g, "").length ==0){ 
				layer.open({
				    content: '请填入标题！'
				    ,skin: 'msg'
				    ,time: 1 //2秒后自动关闭
				  });
			}else
			if (recH5Url.replace(/(^s*)|(s*$)/g, "").length ==0){ 
					layer.open({
					    content: '请填入链接！'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
			}else{
			
			$('#recommendForm').ajaxSubmit({
				type: 'POST',
				url: basePath+'/recommend/addRec.html',
				success: function(){
					layer.open({
					    content: '提交成功！'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
					
				},
				error:function(){
					layer.open({
					    content: '提交失败！'
					    ,skin: 'msg'
					    ,time: 1 //2秒后自动关闭
					  });
				},
				//clearForm: true,
				resetForm: true
				}); 
			$('.tcx-p').hide();
			}
		})
	});
	function LimitTextArea(field){ 
	    maxlimit=100; 
	    if (field.value.length > maxlimit) 
	     field.value = field.value.substring(0, maxlimit);
	  }
	
	</script>
	<script type="text/javascript" src="<%=path %>/inner/js/front.js"></script>
	</body>
</html>
